<template>
	<view v-if="pageData && pageData.list" :style="{background:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`}">
		<!-- 单图 -->
		<view v-if="pageData.list.length==1&&pageData.list[0].img">
			<image :src="$imgUrls(pageData.list[0].img)" mode="widthFix" :class="{'shadow':pageData.shadow==1}" show-menu-by-longpress
				@click="$banerGo(pageData.list[0])" :style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
		</view>
		<!-- 横向滑动 -->
		<view v-if="pageData.list.length>1 && !pageData.effect" :style="{height:`${pageData.height*2}rpx`}" class="d-flex" style="overflow-x:scroll;">
			<image v-for="(item,index) in pageData.list" :key="index" :src="$imgUrls(item.img)" mode="heightFix" class="f-shrink-0" :class="{'shadow':pageData.shadow==1}"
				@click="$banerGo(item)" :style="{borderRadius:`${pageData.radius*2}rpx`,marginRight:`${pageData.gap*2}rpx`}" v-show="item.img"></image>
		</view>
		<!-- 自动轮播 -->
		<swiper v-if="pageData.list.length>1 && pageData.effect==1" :style="{height:`${pageData.height*2}rpx`}" autoplay circular :interval="3000" :duration="3000"
			easing-function="linear" :display-multiple-items="pageData.displayItems || 2.5">
			<swiper-item v-for="(item,index) in pageData.list" :key="index" :style="{paddingRight:`${pageData.gap*2}rpx`, boxSizing: 'border-box'}" @click="$banerGo(item)">
				<image :src="$imgUrls(item.img)" mode="aspectFill" :class="{'shadow':pageData.shadow==1}" :style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:'adv',
		props:['pageData'],
		data() {
			return {
				
			}
		},
		created() {
			if(this.pageData.list.length>1 && !this.pageData.height){
				this.pageData.height = 200
			}
		}
	}
</script>

<style lang="scss" scoped>
.shadow {
	box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
</style>
